<template>
  <view v-if="song.id" class="fixed flex" :style="audioStyle">
    <Cell show-avatar :avatar-size="80" :margin="[0]" :height="100" :width="system._rpxWidth"
      @click="onNavigateTo(`/pages/audio/index`, 'slide-in-bottom')">
      <template #avatar>
        <Avatar :style="{ transform: `rotate(${avatarDeg}deg)` }" :size="80" :round="25" :img="song.al.picUrl" />
      </template>
      <template #title>
        <Text style="width: 300rpx;" :font-size="28" _class="text-overflow-1" :label="song.name" />
      </template>
      <template #label>
        <Text style="width: 300rpx;" :font-size="22" color="grey" _class="text-overflow-1"
          :label="song.ar?.map(item => item.name).join(' / ')" />
      </template>
      <template #right>
        <view class="flex flex-row pr-48">
          <Button size="normal" :width="42" :height="42" transprent text :font-size="46"
            :icon="audio.isPlaying ? 'tmicon-pausecircle-fill' : 'tmicon-playcircle-fill'" @click.stop="onPlay">
          </Button>
          <view style="width: 24rpx;" />
          <Button :width="42" :height="42" text transprent size="mini" :font-size="42" icon="tmicon-outdent">
          </Button>
        </view>
      </template>
    </Cell>
  </view>
</template>
<script setup lang='ts'>
import { ref, computed } from "vue";
import Icon from '@/tmui/components/tm-icon/tm-icon.vue';
import Cell from '@/tmui/components/tm-cell/tm-cell.vue';
import Text from '@/tmui/components/tm-text/tm-text.vue';
import Sheet from '@/tmui/components/tm-sheet/tm-sheet.vue';
import Avatar from '@/tmui/components/tm-avatar/tm-avatar.vue';
import Button from "@/tmui/components/tm-button/tm-button.vue";
import { audioStore, systemStore } from '@/stores';
import { onNavigateTo } from '@/utils';

const props = defineProps({
  bottom: {
    type: Number,
    default: 0
  }
});
const audio = audioStore();
const system = systemStore();
const avatarDeg = ref<number>(0)
let avaDegTimes: NodeJS.Timeout | null = null
let deg = ref<number>(0)
const song = computed(() => audio.songDetail)
const audioStyle = {
  bottom: props.bottom,
  left: 0
}

const onUpdateAvatarDeg = () => {
  avaDegTimes = setInterval(() => {
    if (avatarDeg.value > 360) {
      avatarDeg.value = 0
    } else {
      avatarDeg.value += 1
    }
  }, 50)
}

// #ifdef H5
audioStyle.bottom = 60
// #endif

const onPlay = () => {
  if (audio.isPlaying) {
    clearInterval(avaDegTimes as NodeJS.Timeout)
  } else {
    onUpdateAvatarDeg()
  }
  audio.onPlay()
}



</script>
<style lang='scss' scoped></style>